<template>
  <div>
    <Modal
      v-model="show"
      :loading="true"
      :transfer="true"
      :styles="{left: '100px'}"
      :width="60"
      @cancel="close"
      :mask-closable="true"
      :closable="false"
      class-name="vertical-center-modal"
    >
      <div slot="header">
        <Row>
          <Col span="12">
            <p style="font-weight: 500">帮助文档</p>
          </Col>
          <Col span="12" style="text-align:right">
            编辑状态
            <i-switch v-model="editable" @change="changeEditStatus">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
          </Col>
        </Row>
      </div>
      <Form inline>
        <Row :gutter="32" style="padding: 0 16px;">
          <Col span="0" id="input">
            <Input v-model="content" type="textarea" :autosize="true" @change="textChange" placeholder="Enter Markdown string..." />
          </Col>
          <Col span="24" id="md" >
            <div>
              <markdown-it-vue-light class="md-body" :content="content" :options="options"/>
            </div>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" @click="close">取消</Button>
        <Button
          type="info"
          @click="saveDoc"
          :loading="loading"
        >{{ loading ? '保存中' : '保存' }}</Button>
      </div>
    </Modal>
  </div>


</template>

<script>
import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min'
import 'markdown-it-vue/dist/markdown-it-vue-light.css'

export default {
  name: "HelpDocument",
  components: {
    MarkdownItVueLight
  },
  props: {
    value: Boolean,
  },
  data() {
    return {
      show:this.value,
      editable:false,
      confirmModalShow:false,
      loading:false,
      changeFlag:false,
      options: {
        markdownIt: {
          linkify: true,
        },
        linkAttributes: {
          attrs: {
            target: '_blank',
            rel: 'noopener'
          }
        }
      },
      id: null,
      title: null,
      content: "",
    };
  },
  methods: {
    changeEditStatus: function (val) {
      this.editable = val
    },
    saveDoc: function () {
      this.loading = true;
      this.$axios.post(this.$api.report + "/helpDocument/update",
        {
          id: this.id,
          content: this.content
        },
        {
          headers: {
            "Authorization": "Bearer "+this.$sessionStore.fetch(),
            "Accept": "application/json"
          },
          params: {
            projectId: this.$store.state.projectId
          }
        }).then(response => {
        if (response.status === 200) {
          this.$emit('ok',this.content)
          this.show = false
          this.changeFlag = false
        }else {
          this.$Message.warning('保存失败');
        }
      }).catch(error => {
        console.error(error);
        this.$Message.warning('保存失败');
      }).finally(() => {
        this.loading = false;
      });

    },
    textChange: function (e) {
      this.changeFlag = true
    },
    close: function (e) {
      this.show = true
      if (this.changeFlag){
        this.$Modal.confirm({
          title: 'Title',
          content: '<p>文档内容已被编辑，是否保存修改？</p>',
          onOk: () => {
            this.saveDoc()
          },
          onCancel: () => {
            this.show = false
            this.$emit('cancel',this.content)
            this.changeFlag = false
          }
        });
      }else {
        this.show = false
        this.$emit('cancel')
        this.changeFlag = false
      }
    },
    getHelpDocContent: function () {
      this.$axios.get(this.$api.report + "/helpDocument/query",
        {
          headers: {
            "Authorization": "Bearer " + this.$sessionStore.fetch(),
            "Accept": "application/json"
          },
          params: {
            projectId: this.$store.state.projectId
          }
        }
      ).then(response => {
        if (response.status === 200) {
          // console.log(response.data)
          if (response.data.data && response.data.data.length > 0){
            this.id = response.data.data[0].id
            this.title = response.data.data[0].title
            this.content = response.data.data[0].content
          }
        }
      }).catch(error => {
        // console.log(error);
      }).finally(() => {

      });
    },
  },
  watch: {
    value: function(val) {
      this.getHelpDocContent();
      this.show= val;
    },
    editable: function (val) {
      const input = document.getElementById("input");
      const md = document.getElementById("md")
      if (val === true){
        input.className = 'ivu-col ivu-col-span-12';
        md.className = 'ivu-col ivu-col-span-12';
      }else {
        input.className = 'ivu-col ivu-col-span-0';
        md.className = 'ivu-col ivu-col-span-24';
      }
    }
  }

}
</script>

<style scoped>
/*.md-body {*/
/*  height: 200px;*/
/*}*/
</style>
